﻿@model IoTGateway.ViewModel.BasicData.DeviceVariableVMs.DeviceVariableListVM
@inject IStringLocalizer<Program> Localizer;

<wt:treecontainer items="AllDevices" id-field="Searcher.DeviceId" height="500">
    <wt:searchpanel vm="@Model" reset-btn="true">
        <wt:row items-per-row="ItemsPerRowEnum.Three">
            <wt:textbox field="Searcher.Name" />
            <wt:textbox field="Searcher.Method" />
            <wt:textbox field="Searcher.DeviceAddress" />
            <wt:combobox field="Searcher.DataType" empty-text="@Localizer["Sys.All"]" />
        </wt:row>
    </wt:searchpanel>
    <wt:grid vm="@Model" url="/BasicData/DeviceVariable/Search" hidden-grid-index="true" done-func="subTopics" />
</wt:treecontainer>

<link href="~/sitecss/animate.min.css" rel="stylesheet" />
<script src="~/mqtt.min.js" type="text/javascript"></script>

<script type="text/javascript">
    var options = {
        clientId: 'iotgatewayInternal_' + (Math.random()),
        clean: true
    }
    var client = mqtt.connect('ws://' + window.location.host + '/mqtt', options);

    //数据绑定到前端
    client.on('message',
        function (topic, message) {
            var objmsg = $.parseJSON(message.toString());

            //原值
            $('#id' + objmsg.VarId + '_Value').text(objmsg.Value);
            $('#id' + objmsg.VarId + '_Value').addClass('animated bounceIn');
            setTimeout(function () {
                $('#id' + objmsg.VarId + '_Value').removeClass('bounceIn');
            }, 1500);

            //加工值
            $('#id' + objmsg.VarId + '_CookedValue').text(objmsg.CookedValue);
            $('#id' + objmsg.VarId + '_CookedValue').addClass('animated bounceIn');
            setTimeout(function () {
                $('#id' + objmsg.VarId + '_CookedValue').removeClass('bounceIn');
            }, 1500);

            //状态
            $('#id' + objmsg.VarId + '_State').text(objmsg.StatusType);
            $('#id' + objmsg.VarId + '_State').addClass('animated bounceIn');
            setTimeout(function () {
                $('#id' + objmsg.VarId + '_State').removeClass('bounceIn');
            }, 1500);

            //时间
            $('#id' + objmsg.VarId + '_Timestamp').text(objmsg.Timestamp);
            $('#id' + objmsg.VarId + '_Timestamp').addClass('animated bounceIn');
            setTimeout(function () {
                $('#id' + objmsg.VarId + '_Timestamp').removeClass('bounceIn');
            }, 1500);

            //Message
            $('#id' + objmsg.VarId + '_Message').text(objmsg.Message);
            $('#id' + objmsg.VarId + '_Message').addClass('animated bounceIn');
            setTimeout(function () {
                $('#id' + objmsg.VarId + '_Message').removeClass('bounceIn');
            }, 1500);
        });

    //已订阅topic列表
    var subedTopics = null;

    function subTopics() {

        if (subedTopics) {
            //取消订阅以前的topic
            client.unsubscribe(subedTopics, function (err) {
                if (!err) {
                    console.log('取消订阅成功!');
                } else {
                    console.error('取消订阅失败:', err);
                }
            });
        }

        // 只获取 <td data-field="Name"> 的 data-content 值
        const variableNames = Array.from(document.querySelectorAll('td[data-field="Name"]'))
            .map(el => el.getAttribute('data-content'));

        let topics = variableNames.map(v => "internal/v1/gateway/telemetry/+/" + v);

        client.subscribe(topics,
            function (err) {
                if (!err) {
                    subedTopics = topics;
                    console.log("订阅成功!");
                } else {
                    console.log(err);
                }
            });
    }
</script>